<div class="header-container">
  <i class="drag-icon" (mousedown)="onTap($event)">
    <svg
      width="16px"
      height="16px"
      viewBox="0 0 16 16"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg"
      xmlns:xlink="http://www.w3.org/1999/xlink"
    >
      <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <path
          d="M4.5,1.5 L5.5,1.5 C6.05228475,1.5 6.5,1.94771525 6.5,2.5 L6.5,3.5 C6.5,4.05228475 6.05228475,4.5 5.5,4.5 L4.5,4.5 C3.94771525,4.5 3.5,4.05228475 3.5,3.5 L3.5,2.5 C3.5,1.94771525 3.94771525,1.5 4.5,1.5 Z M10.5,1.5 L11.5,1.5 C12.0522847,1.5 12.5,1.94771525 12.5,2.5 L12.5,3.5 C12.5,4.05228475 12.0522847,4.5 11.5,4.5 L10.5,4.5 C9.94771525,4.5 9.5,4.05228475 9.5,3.5 L9.5,2.5 C9.5,1.94771525 9.94771525,1.5 10.5,1.5 Z M4.5,6.5 L5.5,6.5 C6.05228475,6.5 6.5,6.94771525 6.5,7.5 L6.5,8.5 C6.5,9.05228475 6.05228475,9.5 5.5,9.5 L4.5,9.5 C3.94771525,9.5 3.5,9.05228475 3.5,8.5 L3.5,7.5 C3.5,6.94771525 3.94771525,6.5 4.5,6.5 Z M10.5,6.5 L11.5,6.5 C12.0522847,6.5 12.5,6.94771525 12.5,7.5 L12.5,8.5 C12.5,9.05228475 12.0522847,9.5 11.5,9.5 L10.5,9.5 C9.94771525,9.5 9.5,9.05228475 9.5,8.5 L9.5,7.5 C9.5,6.94771525 9.94771525,6.5 10.5,6.5 Z M4.5,11.5 L5.5,11.5 C6.05228475,11.5 6.5,11.9477153 6.5,12.5 L6.5,13.5 C6.5,14.0522847 6.05228475,14.5 5.5,14.5 L4.5,14.5 C3.94771525,14.5 3.5,14.0522847 3.5,13.5 L3.5,12.5 C3.5,11.9477153 3.94771525,11.5 4.5,11.5 Z M10.5,11.5 L11.5,11.5 C12.0522847,11.5 12.5,11.9477153 12.5,12.5 L12.5,13.5 C12.5,14.0522847 12.0522847,14.5 11.5,14.5 L10.5,14.5 C9.94771525,14.5 9.5,14.0522847 9.5,13.5 L9.5,12.5 C9.5,11.9477153 9.94771525,11.5 10.5,11.5 Z"
          fill="#C7CAD0"
        ></path>
      </g>
    </svg>
  </i>
  <ng-container *ngIf="nestedColumn">
    <span class="childtable-toggler" (click)="toggleChildrenTable()">
      <ng-container *ngIf="childrenTableOpen">
        <svg
          *ngIf="!iconFoldTable"
          class="svg-icon-close-folder"
          width="16px"
          height="16px"
          viewBox="0 0 16 16"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M12,7 L4,7 L4,9 L12,9 L12,7 Z"
              fill="#293040"
              fill-rule="nonzero"
            ></path>
          </g>
        </svg>
        <span class="customized-icon" *ngIf="iconFoldTable" [innerHTML]="iconFoldTable | safe: 'html'"></span>
      </ng-container>
      <ng-container *ngIf="!childrenTableOpen">
        <svg
          *ngIf="!iconUnFoldTable"
          class="svg-icon-open-folder"
          width="16px"
          height="16px"
          viewBox="0 0 16 16"
          version="1.1"
          xmlns="http://www.w3.org/2000/svg"
          xmlns:xlink="http://www.w3.org/1999/xlink"
        >
          <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
            <path
              d="M3,2 L13,2 C13.5522847,2 14,2.44771525 14,3 L14,13 C14,13.5522847 13.5522847,14 13,14 L3,14 C2.44771525,14 2,13.5522847 2,13 L2,3 C2,2.44771525 2.44771525,2 3,2 Z M7,7 L4,7 L4,9 L7,9 L7,12 L9,12 L9,9 L12,9 L12,7 L9,7 L9,4 L7,4 L7,7 Z"
              fill="#293040"
              fill-rule="nonzero"
            ></path>
          </g>
        </svg>
        <span class="customized-icon" *ngIf="iconUnFoldTable" [innerHTML]="iconUnFoldTable | safe: 'html'"></span>
      </ng-container>
    </span>
  </ng-container>
  <span class="title">
    <ng-content></ng-content>
  </span>
  <d-table-sort *ngIf="sortable" [sortDirection]="sortDirection" [showSortIcon]="showSortIcon" (sortEvent)="onSort($event)"></d-table-sort>
  <d-table-filter
    *ngIf="filterable"
    [showFilterIcon]="showFilterIcon"
    [beforeFilter]="beforeFilter"
    [customFilterTemplate]="customFilterTemplate"
    [extraFilterTemplate]="extraFilterTemplate"
    [column]="column"
    [searchFn]="searchFn"
    [filterList]="filterList"
    [filterIconActive]="filterIconActive"
    (filterIconActiveChange)="onFilterIconActive($event)"
    [filterMultiple]="filterMultiple"
    [closeWhenScroll]="closeFilterWhenScroll"
    [filterBoxWidth]="filterBoxWidth"
    [filterBoxHeight]="filterBoxHeight"
    (filterChange)="emitFilterData($event)"
  ></d-table-filter>
</div>
